import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, Image, StyleSheet } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import { isArrayFn } from 'src/utils/JSTypeUtil'
import { getUserAvatorLocalCByGender } from 'src/utils/ConfigUtil'
import DefaultImage from '../image/DefaultImage'
import { formatTime, todayYestodayTime } from '../../utils/TimeUtil'
import { getEducationByValue } from '../../utils/ConfigUtil'

const workNatureMap = new Map([
  ['全职', require('@/imgC/home/tag_quanzhi.png')],
  ['兼职', require('@/imgC/home/tag_jianzhi.png')],
  ['实习', require('@/imgC/home/tag_shixi.png')]
])
const introPLaceHolder = '这家伙很懒,什么都没写'
export default class PersonCell extends React.PureComponent {
  static propTypes = {
    item: PropTypes.object,
    showTime: PropTypes.bool,
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    introStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    bottomViewStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    rightViewStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
  }

  static defaultProps = {
    showTime: false
  }

  render () {
    const { style, item, showTime, introStyle, bottomViewStyle, rightViewStyle } = this.props
    let comprehensive = {}
    if (item.comprehensive) {
      comprehensive = JSON.parse(item.comprehensive)
    }
    if (comprehensive.workNature && !isArrayFn(comprehensive.workNature)) {
      comprehensive.workNature = [comprehensive.workNature]
    }
    if (comprehensive.workCategory && comprehensive.workCategory.length > 3) {
      comprehensive.workCategory = comprehensive.workCategory.splice(0, 3)
    }
    return (
      <View style={[styles.cell].concat(style)}>
        <View style={styles.leftView}>
          <DefaultImage
            style={styles.avator}
            source={{ uri: item.avatarUrl }}
            errorSource={getUserAvatorLocalCByGender(item.gender, item.userId)}
          />
          <CustomImage
            style={styles.gender}
            source={(item.gender || '').toString() === '1' || (item.gender || '').toString() === 'male' ? require('@/imgC/home/genderBoy.png') : require('@/imgC/home/genderGirl.png')}/>
        </View>
        <View style={[styles.rightView].concat(rightViewStyle)}>
          <View style={styles.titWrap}>
            <Text style={styles.userName}>{item.userName}</Text>
            {!!comprehensive.workNature && comprehensive.workNature.map(e => workNatureMap.has(e) &&
              <Image key={e} style={styles.tagImg} source={workNatureMap.get(e)}/>)}
            <Text style={styles.education}>{getEducationByValue(item.education)}</Text>
          </View>
          <Text numberOfLines={2} style={[styles.intro].concat(introStyle)}>{item.intro || introPLaceHolder}</Text>
          {
            showTime ? (
              <Text
                style={styles.bottomRightText}>{todayYestodayTime(new Date(formatTime(item.utcCreated)).getTime(), true)}</Text>
            ) : (
              <View style={[styles.tagWrap].concat(bottomViewStyle)}>
                {!!comprehensive.workCategory && comprehensive.workCategory.filter(e => e).map((item, index) => {
                  return (<Text
                    key={index}
                    style={styles.tagText}>{'#' + item}
                  </Text>)
                })}
              </View>
            )
          }
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  cell: {
    width: '100%',
    paddingTop: ScaleS(20),
    paddingHorizontal: ScaleS(20),
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  leftView: {
    width: ScaleS(50),
    height: ScaleS(50),
    position: 'relative'
  },
  avator: {
    width: ScaleS(50),
    height: ScaleS(50),
    resizeMode: 'cover',
    borderRadius: ScaleS(25)
  },
  gender: {
    position: 'absolute',
    top: ScaleS(3),
    right: ScaleS(-9),
    width: ScaleS(18)
  },
  rightView: {
    marginLeft: ScaleS(25),
    flex: 1,
    paddingBottom: ScaleS(14),
    borderBottomWidth: ScaleS(1),
    borderStyle: 'solid',
    borderColor: 'rgba(120, 120, 120, .1)'
  },
  titWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    height: ScaleS(26)
  },
  userName: {
    fontSize: ScaleT(19),
    fontWeight: '500',
    color: '#222222',
    marginRight: ScaleS(7)
  },
  tagImg: {
    width: ScaleS(18),
    marginRight: ScaleS(3)
  },
  education: {
    flex: 1,
    textAlign: 'right',
    fontSize: ScaleT(13),
    fontWeight: '400',
    color: '#999999'
  },
  intro: {
    marginTop: ScaleS(16),
    fontSize: ScaleT(14),
    fontWeight: '400',
    color: '#222222',
    lineHeight: ScaleS(25)
  },
  tagWrap: {
    marginTop: ScaleS(13),
    flexDirection: 'row'
    // height: ScaleS(18)
  },
  tagText: {
    fontSize: ScaleT(13),
    marginRight: ScaleS(16),
    fontWeight: '400',
    color: '#999999'
  },
  bottomRightText: {
    color: '#999999',
    fontSize: ScaleT(13),
    fontWeight: '400',
    marginTop: ScaleS(16)
  }
})
